<template> 
  <div class="log-main flex-box">
    <transition mode="out-in" name="slide-fade" v-if="show">
      <rzLog v-on:logShowOn="logShowOn"></rzLog>
    </transition>
    <transition mode="out-in" name="slide-fade" v-else>
      <keep-alive><rzRegister v-on:registerShowOn="registerShowOn"></rzRegister></keep-alive>
    </transition>
    <div class="log-style">
      <ul class="flex-box">
        <li class="flex-box"><svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-diary-weibo"></use>
            </svg></li>
        <li class="flex-box"><svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-diary-qq"></use>
            </svg></li>
        <li class="flex-box"><svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-diary-weixin"></use>
            </svg></li>
      </ul>
    </div>
  </div>
</template>

<script>
import '@/assets/css/logRegister.scss'
import rzLog from '@/components/log.vue'
import rzRegister from '@/components/register.vue'
export default {
  name: 'LogIndex',
  data() {
    return {
      show: true
    }
  },
  props: {
    msg: String
  },
  components: {
    rzLog,
    rzRegister
  },
  methods: {
    logShowOn: function(log_show) {
      // log_show就是子组件传过来的值
      this.show = log_show
    },
    registerShowOn: function(register_show) {
      // register_show就是子组件传过来的值
      this.show = register_show
    }
  },
  mounted() {
    let oHeight = $(window).height()
    $('body').css('height', oHeight)
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.slide-fade-enter-active,
.slide-fade-leave-active {
  transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1.1);
}
.slide-fade-enter, .slide-fade-leave-to
  /* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(20px);
  opacity: 0;
}
</style>
